<template>
  <view class="public-content">
    <view class="public-title">
      {{ $t('nav.title7') }}
    </view>
    <view class="public-list-index cooperation-partner_index">
      <view class="partner-title">{{ $t('partner.title') }}</view>
      <view class="partner-name">{{ $t('partner.comment') }}</view>
      <view v-for="(item, index) in associateList" :key="index">
        <view class="item-title">{{ $t(`partner.data.title${item.value}`) }}</view>
        <view class="item-img">
          <view v-for="(v, i) in item.list" :key="i" class="v-img">
            <image :src="`/static/index/partner${v.name}.png`" mode="aspectFit" style="width: 100%; height: 100%">
            </image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 合作伙伴列表
const associateList = [
  {
    value: '1',
    list: [
      { name: '1' },
      { name: '2' },
      { name: '3' },
      { name: '4' },
      { name: '5' },
      { name: '6' }
    ]
  },
  {
    value: '2',
    list: [{ name: '7' }, { name: '8' }, { name: '9' }, { name: '10' }]
  },
  {
    value: '3',
    list: [{ name: '11' }, { name: '12' }]
  }
]
</script>

<style lang="scss">
// 合作伙伴
.cooperation-partner_index {
  .partner-title {
    color: #000618;
  }

  .partner-name {
    color: #000618;
  }

  .item-title {
    color: #000618;
  }

  .item-img {
    .v-img {
      // background: #ffffff;
      border: 1px solid #ebebeb;
    }
  }
}
</style>
